<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #ffffff;
            font-size: 16px;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c;
        }

        .login {
            height: 12rem;
            /*background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);*/
            background: url(../../image/my_bg.png) center center/cover no-repeat;
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        .bottom_10 {
            height: 10px;
            background: #F3EFEE;
        }

        .userHerder {
            padding: 0 0.2rem;
        }

        .userHerder img {
            width: 1.2rem;
            height: 1.2rem;
        }
        /*.user_nav_one_img{
          height: 1.5rem;
        }*/
        .user_nav_one_img1 {
            width: 2.5rem;
        }
        .user_nav_one_img,
        .user_nav_one_img1 {
            margin-bottom: 0.2rem;
        }

        .user_nav_two p {
            color: #333;
        }

        .aui-list .all_indent {
            font-size: 0.7rem;
        }

        .userYellow {
            margin-left: 0.5rem;
            width: 2.5rem;
            border-radius: 0.1rem;
            /*line-height: 1rem;*/
            font-size: 0.8rem;
            height: 1rem;
            text-transform: uppercase;
            -moz-box-shadow: 1px 1px 0.1rem rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 1px 1px 0.1rem rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 0.1rem rgba(0, 0, 0, 0.2);
        }

        .userHerder>.userMy {
            font-size: 1rem;
        }

        .user_nav_one>div {
            position: relative;
        }

        .aui-badge {
            background: #fff;
            border: 1px solid #ff0036;
            color: #ff0036;
            top: -0.2rem;
        }

        .xiabaoNum {
            position: relative;
        }

        .xiabaoNum span {
            position: absolute;
            top: -0.2rem;
            right: -0.7rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            font-size: 0.6rem;
            text-align: center;
            line-height: 1rem;
        }

        .list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem;
            position: relative;
        }

        .list li::after {
            content: "";
            position: absolute;
            bottom: 0;
            height: 1px;
            background: #eee;
            width: calc(100vw - 0.5rem);
            right: 0;
        }

        .list li .img_title {
            display: flex;
            align-items: center;
        }

        .list li .img_title img {
            width: 1.8rem;
            margin-right: 0.5rem;
        }

        .list li .img_title .title {
            font-size: 0.7rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-refresh-content">
            <div class="aui-content login" style="padding-top:25px">
                <div class="" tapmode="">
                    <!-- <img src="../../image/personal_bkg.jpg" alt="" class="loginbg"> -->
                    <div class="userinfo">
                        <div class="userHerder">
                            <img src="../../image/my/m25.png" alt="" onclick="openControl('./set.html')">
                            <div class="userMy">我的</div>
                            <img src="../../image/my/m24.png" alt="" onclick="openControl('./punchcard.html')">
                        </div>
                        <div class="userContent" style="display: flex;align-items: center;justify-content: space-between;" v-if="re == 1">
                            <div class="userimg">
                                <div class="personal_logo" :style="'background:url('+userImg+') center center/cover no-repeat;'" onclick="openControl('./personMsg.html')"></div>
                                <div>
                                    <div class="userMy">{{userName}}<span class="userYellow" @click="vipMsg">{{dataVip}}</span></div>
                                    <div class="userMy">{{userPhone}}</div>
                                </div>
                            </div>
                            <div class="userMy" onclick="openControl('./personMsg.html')">编辑资料 <i class="aui-iconfont aui-icon-right"></i></div>
                        </div>
                        <div class="userContent" style="display: flex;align-items: center;justify-content: space-between;" v-else>
                            <div class="userimg" onclick="login()">
                                <div class="personal_logo" style="background:url(../../image/wei_dl.jpg) center center/cover no-repeat;"></div>
                                <div>
                                    <div class="userMy">用户未登录</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-content ">
                <ul class="aui-list aui-media-list">
                    <li class="aui-list-item aui-list-item-middle">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-inner aui-list-item-arrow">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title aui-font-size-18"><span style="border-radius: 1rem;border: 1px solid #ff8000;color: #ff8000;padding: 0.2rem 0.3rem 0.1rem 0.3rem;">我的订单</span></div>
                                    <div class="aui-list-item-right all_indent" onclick="orderAll('我的订单', '')"><span style="border-radius: 1rem;border: 1px solid #ff8000;color: #ff8000;padding: 0.2rem 0.3rem 0.1rem 0.3rem;">全部订单</span></div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="user_nav_one">
                    <div onclick="orderAll('我的订单', 1)" class="xiabaoNum">
                        <img src="../../image/my/m1.png" alt="" class="user_nav_one_img">
                        <span class="aui-label aui-label-danger" v-if="statu.payment!=0 && $api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != null && $api.getStorage('token') != 'undefined'">{{statu.payment}}</span>
                        <!-- <div class="aui-badge">8</div> -->
                    </div>
                    <div onclick="orderAll('我的订单', 2)" class="xiabaoNum">
                        <img src="../../image/my/m3.png" alt="" class="user_nav_one_img">
                        <span class="aui-label aui-label-danger" v-if="statu.consignment!=0 && $api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != null && $api.getStorage('token') != 'undefined'">{{statu.consignment}}</span>
                        <!-- <div class="aui-badge">8</div> -->
                    </div>
                    <div onclick="orderAll('我的订单', 3)" class="xiabaoNum">
                        <img src="../../image/my/m2.png" alt="" class="user_nav_one_img">
                        <span class="aui-label aui-label-danger" v-if="statu.take_over_goods!=0 && $api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != null && $api.getStorage('token') != 'undefined'">{{statu.take_over_goods}}</span>
                        <!-- <div class="aui-badge">8</div> -->
                    </div>
                    <!-- <div onclick="orderAll('我的订单', 4)" class="user_nav_one_div">
                        <img src="../../image/my/m5.png" alt="" class="user_nav_one_img">
                    </div> -->
                    <div onclick="orderAll('我的订单', 5)" class="xiabaoNum">
                        <img src="../../image/my/m4.png" alt="" class="user_nav_one_img">
                        <span class="aui-label aui-label-danger" v-if="statu.evaluation!=0 && $api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != null && $api.getStorage('token') != 'undefined'">{{statu.evaluation}}</span>
                        <!-- <div class="aui-badge">8</div> -->
                    </div>
                    <!-- <div onclick="afterSale()" class="user_nav_one_div">
                        <img src="../../image/my/m5.png" alt="" class="user_nav_one_img">
                    </div> -->
                    <div onclick="orderAll('我的订单', 6)" class="user_nav_one_div xiabaoNum">
                        <img src="../../image/my/m5.png" alt="" class="user_nav_one_img">
                        <span class="aui-label aui-label-danger" v-if="statu.refund!=0 && $api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != null && $api.getStorage('token') != 'undefined'">{{statu.refund}}</span>
                        <!-- <div class="aui-badge">8</div> -->
                    </div>
                </div>
                <div class="user_nav_two">
                    <p onclick="orderAll('我的订单', 1)" class="user_nav_two_text">待付款</p>
                    <p onclick="orderAll('我的订单', 2)" class="user_nav_two_text">待发货</p>
                    <p onclick="orderAll('我的订单', 3)" class="user_nav_two_text">已发货</p>
                    <!-- <p onclick="orderAll('我的订单', 4)" class="user_nav_two_text">已完成</p> -->
                    <p onclick="orderAll('我的订单', 5)" class="user_nav_two_text">待评价</p>
                    <!-- <p onclick="afterSale()" class="user_nav_two_text">退款/售后</p> -->
                    <p onclick="orderAll('我的订单', 6)" class="user_nav_two_text">退款/售后</p>
                </div>
            </div>
            <div class="user_nav_line"></div>
            <div class="user_nav_one">
                <div class="">
                    <img src="../../image/my/m6.png" alt="" class="user_nav_one_img" onclick="myshop()" style="width: 2rem;">
                </div>
                <div class="">
                    <img src="../../image/my/m7.png" alt="" class="user_nav_one_img" onclick="mycollect()" style="width: 2rem;">
                </div>
                <div class="">
                    <img src="../../image/my/m8.png" alt="" class="user_nav_one_img" onclick="myfooter()" style="width: 2rem;">
                </div>
                <div class="">
                    <img src="../../image/my/m9.png" alt="" class="user_nav_one_img" onclick="myprice()" style="width: 2rem;">
                </div>
                <div class="user_nav_one_div">
                    <img src="../../image/my/m10.png" alt="" class="user_nav_one_img" onclick="mybranch()" style="width: 2rem;">
                </div>
            </div>
            <div class="user_nav_two">
                <p onclick="myshop()">我的小店</p>
                <p onclick="mycollect()">我的收藏</p>
                <p onclick="myfooter()">我的足迹</p>
                <p onclick="myprice()">我的钱包</p>
                <p onclick="mybranch()">我的分店</p>
            </div>
            <img src="../../image/my/m11.png" alt="">

            <ul class="list">

                <li onclick="myEarnings()">
                    <div class="img_title">
                        <img src="../../image/my/m18.png" alt="">
                        <div class="title">我的收益</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
                <li onclick="businessBooper()">
                    <div class="img_title">
                        <img src="../../image/my/m19.png" alt="">
                        <div class="title">商业合作</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
                <li onclick="introduceBusiness()">
                    <div class="img_title">
                        <img src="../../image/my/m20.png" alt="">
                        <div class="title">引荐商家</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
                <li onclick="shopCenter()">
                    <div class="img_title">
                        <img src="../../image/my/m21.png" alt="">
                        <div class="title">店铺中心</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
                <li onclick="mybsinesscicle()">
                    <div class="img_title">
                        <img src="../../image/my/m22.png" alt="">
                        <div class="title">我的商圈</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
                <li onclick="mysubordinates()">
                    <div class="img_title">
                        <img src="../../image/my/wdxj.png" alt="">
                        <div class="title">我的下级</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
                <li onclick="other_gn()">
                    <div class="img_title">
                        <img src="../../image/my/other.png" alt="">
                        <div class="title">其他功能</div>
                    </div>
                    <div class="icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    function login() {
        all_open_login(function() {
            api.openWin({
                name: 'login',
                url: './headerone.html',
                pageParam: {
                    msg: '',
                    url: './login.html'
                }
            });
        });
    }

    function mybsinesscicle() {
        all_open_login(function() {
            api.openWin({
                name: 'myBusinesscircle',
                url: './headerone.html',
                pageParam: {
                    msg: '我的商圈',
                    url: './myBusinesscircle.html'
                }
            });
        });
    }

    // 我推荐的人
    function mysubordinates() {
        all_open_login(function() {
            api.openWin({
                name: 'mysubordinates',
                url: './headerone.html',
                pageParam: {
                    msg: '我的下级',
                    url: './mysubordinates.html'
                        // url:'./chose_map_address.html'
                }
            });
        });
    }

    // 其他功能
    function other_gn() {
        all_open_login(function() {
            api.openWin({
                name: 'other_gn',
                url: './headerone.html',
                pageParam: {
                    msg: '其他功能',
                    url: './other_gn.html'
                }
            });
        });
    }

    function shopCenter() {
        api.ajax({
            url: window.Url.Freestore_storeinfo,
            method: 'post',
            data: {
                values: {
                    token: $api.getStorage('token')
                }
            }
        }, function(ret, err) {
            if (ret.re == 1) {
                all_open_login(function() {
                    api.openWin({
                        name: 'shopCenter',
                        url: './shopCenter.html',
                    });
                });
            } else if (ret.re == 3) {
                api.openWin({
                    name: 'header_one_sqsj',
                    url: './headerone.html',
                    pageParam: {
                        msg: '申请商家',
                        url: './applyForbusiness.html'
                    }
                });
            } else if (ret.re == 4) {
                api.openWin({
                    name: 'header_one_sqsj',
                    url: './headerone.html',
                    pageParam: {
                        msg: '申请商家',
                        url: './wait_applyForbusiness.html'
                    }
                });
            }
        });
    }

    function introduceBusiness() {
        all_open_login(function() {
            api.openWin({
                name: 'introduceBusiness',
                url: './headerone.html',
                pageParam: {
                    msg: '引荐商家',
                    url: './introduceBusiness.html'
                }
            });
        });
    }

    function afterSale() {
        all_open_login(function() {
            api.openWin({
                name: 'afterSale',
                url: './headerone.html',
                pageParam: {
                    msg: '售后订单',
                    url: './afterSale.html'
                }
            });
        });
    }

    function businessBooper() {
        all_open_login(function() {
            api.openWin({
                name: 'businessCooperation',
                url: './headerone.html',
                pageParam: {
                    msg: '商业合作',
                    url: './businessCooperation.html'
                }
            });
        });
    }

    function myEarnings() {
        all_open_login(function() {
            api.openWin({
                name: 'myEarnings',
                url: './headerone.html',
                pageParam: {
                    msg: '我的收益',
                    url: './myEarnings.html'
                }
            });
        });
    }

    function ortherMall() {
        all_open_login(function() {
            api.openWin({
                name: 'otherMall',
                url: './headerone.html',
                pageParam: {
                    msg: '其他商城',
                    url: './ortherMall.html'
                }
            });
        });

    }

    function mybranch() {
        all_open_login(function() {
            api.openWin({
                name: 'mybranch',
                url: './headerone.html',
                pageParam: {
                    msg: '我的分店',
                    url: './mybranch.html'
                }
            });
        });
    }

    function myprice() {
        all_open_login(function() {
            api.openWin({
                name: 'mypurse',
                url: './mypurse.html'
            })
        })
    }

    function myfooter() {
        all_open_login(function() {
            // api.openWin({
            //     name: 'myfooter',
            //     url: './headerThree.html',
            //     pageParam: {
            //         msg: '我的足迹',
            //         img: '../../image/my/delete.png',
            //         url: './myfooter.html'
            //     }
            // });
            api.openWin({
                name: 'myfooter',
                url: './five_frame_header2.html',
                pageParam: {
                    type: '我的足迹',
                    name: 'myfooter'
                }
            });
        });
    }

    function myshop() {
        all_open_login(function() {
            api.openWin({
                name: 'myshop',
                url: './headerTwo.html',
                pageParam: {
                    msg: '我的小店',
                    url: './myshop.html'
                }
            });
        });
    }

    function mycollect() {
        all_open_login(function() {
            api.openWin({
                name: 'mycollect',
                url: './headerThree.html',
                pageParam: {
                    msg: '我的收藏',
                    // img: '../../image/my/delete.png',
                    url: './mycollect.html'
                }
            });
        });
    }

    function orderAll(name, type) {
        all_open_login(function() {
            api.openWin({
                name: 'orderAll',
                url: './headerone.html',
                pageParam: {
                    msg: name,
                    url: './orderAll.html',
                    type: type
                }
            });
        });

    }

    function openControl(url) {
        all_open_login(function() {
            api.openWin({
                name: 'person',
                url: url,
                pageParam: {
                    name: 'test'
                }

            });
        })
    }

    function openWinInfo(type) {
        all_open_login(function() {
            api.openWin({
                name: 'type',
                url: './user_Info.html',
                pageParam: {
                    name: 'test'
                }
            });
        });

    }
</script>
<script>
    apiready = function() {
        // alert(JSON.stringify(api))
        new Vue({
            el: '#app',
            data: {
                userImg: '',
                userName: '',
                userPhone: '',
                dataVip: '',
                token: '',
                re: -1,
                statu: [],
                vip_url: ''
            },
            created: function() {
                var _this = this;
                _this.token = $api.getStorage('token') || '';
                api.ajax({
                    url: window.Url.Freeucenter_myInfo,
                    method: 'post',
                    data: {
                        values: {
                            token: _this.token,
                        }
                    }
                }, function(ret, err) {
                    ///alert(JSON.stringify(ret));
                    if (ret.re == 1) {
                        _this.re = 1;
                        _this.userImg = ret.data.head_img;
                        _this.userName = ret.data.username;
                        _this.userPhone = ret.data.mobile;
                        // _this.userPhone = ret.data.user_id;
                        $api.setStorage('user_phone', ret.data.mobile);
                        _this.dataVip = ret.data.vip_name;
                        _this.vip_url = ret.data.vip_url;
                    } else {
                        console.log(JSON.stringify(ret));
                    }
                });

                api.ajax({
                    url: window.Url.Freeucenter_orderNum,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                        }
                    }
                }, function(ret, err) {
                    if (ret.re == 1) {
                        _this.statu = ret.data.list;
                        console.log(JSON.stringify(ret));
                    } else {
                        console.log(JSON.stringify(ret));
                    }
                });

                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {
                    _this.personMsg();
                    if (ret.status == "success") {
                        setTimeout(function() {
                            pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                        }, 1500)
                    }
                })

                // api.ajax({
                //     url: window.Url.Freeorder_myOrder,
                //     method: 'post',
                //     data: {
                //         values: {
                //             token: $api.getStorage('token'),
                //             type:  $_this.type,
                //             page: $_this.page,
                //         }
                //     }
                // }, function(ret, err) {
                //     if (ret) {
                //       console.log(JSON.stringify(ret))
                //       if (ret.re == 1) {
                //         $_this.totalpage = ret.data.sum_page
                //         $_this.list = ret.data.list
                //       } else {
                //         $_this.totalpage = 1
                //         $_this.list = []
                //       }
                //       fn && fn()
                //
                //     } else {
                //         api.alert({msg: JSON.stringify(err)});
                //     }
                // })
            },
            methods: {
                vipMsg: function() {
                    var _this = this;
                    api.openWin({
                        name: 'vipMsg',
                        url: './five_frame_header2.html',
                        pageParam: {
                            data: _this.vip_url,
                            type: 'vip权益'
                        }
                    });

                }
            },
            mounted: function() {
                api.addEventListener({
                    name: 'user_close_event'
                }, function(ret, err) {
                    if (ret) {
                        if (ret.value.close_Frame) {
                            api.closeFrame();
                        }
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });


            },
            filters: {}
        })
    }
</script>

</html>
